<template>
	<view>
		<view class="user-home-thing" @click="clickClearStorage">
			<text>清除缓存</text>
			<text
				style="position: absolute; margin-left: 100px;color: #cdcdcd;font-size: 5px;">{{ storageSize }}kb</text>
		</view>
		<view class="user-home-thing">
			<text>修改密码</text>
		</view>
		<view class="user-home-thing">
			<text>注销账号</text>
		</view>
		<view class="user-home-thing">

			<text>帮助反馈</text>
		</view>
		<view class="user-home-thing">
			<text>关于萌物栏</text>
		</view>

		<view class="logout-button" @click="clickLogout">退出登录</view>
	</view>
</template>

<script>
	import {
		logout
	} from "@/api/login.js"
	export default {
		data() {
			return {
				storageSize: 0
			}
		},
		methods: {
			clickLogout() {
				logout().then(res => {
					if (res.code == 200) {
						// 删除用户信息缓存
						uni.removeStorage({
							key: 'token',
						});
						uni.removeStorage({
							key: 'userVO',
						});
						// 再跳转到首页
						uni.switchTab({
							url: "/pages/index/index"
						});
					}
				})
			},
			clickClearStorage() {
				// 清除缓存
				uni.clearStorage();
				this.storageSize = 0
			}
		},
		onLoad() {
			uni.getStorageInfo({
				success: (res) => {
					this.storageSize = res.currentSize;
				}
			});
		}
	}
</script>

<style>
	.user-home-thing {
		height: 60px;
		line-height: 25px;
		margin-left: 25px;
		font-size: 15px;
		position: relative;
	}

	.user-home-thing::after {
		content: '';
		background-image: url('/static/image/向右.png');
		background-size: 12px;
		width: 12px;
		height: 12px;
		font-family: monospace;
		font-weight: bold;
		position: absolute;
		right: 30px;
		top: 21px;
	}

	.user-home-thing>text {
		position: absolute;
		top: 28%;
		margin-left: 15px;
		font-weight: bold;
	}

	.logout-button {
		width: 100%;
		height: 40px;
		border-radius: 20px;
		background-color: white;
		text-align: center;
		line-height: 40px;
		position: absolute;
		bottom: 0px;
		border-top: 1px solid #cdcdcd;
		color: #ffd524;
	}
</style>